<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部组件 -->
      <PageTool>
        <template #before>
          <el-button type="primary" @click="addFn">添加经纪</el-button>
        </template>
        <template #after>
          <el-input v-model="search" placeholder="请输入内容" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
          </el-input>
        </template>
      </PageTool>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="image" label="图片" width="120px">
          <template v-slot="{row}">
            <img
              v-imgError="require('@/assets/common/bigUserHeader.png')"
              style="width: 100px"
              :src="row.image"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-card>
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <!-- 弹窗 -->
      <addAgents ref="addAgents" :show-dialog.sync="visibleDialog" @updateEvent="getAgentsList" />
    </div>
  </div>
</template>

<script>
import { getAgents, delAgents, getAgentsCount } from '@/api/agents'
import addAgents from './components/addAgents.vue'
export default {
  components: {
    addAgents
  },
  data() {
    return {
      tableData: [],
      visibleDialog: false,
      limit: 4,
      start: 0,
      total: 1,
      search: ''
    }
  },
  created() {
    // 获取经纪列表
    this.getAgentsList()
  },
  methods: {
    // 获取经纪列表
    async getAgentsList() {
      const res = await getAgents({
        _limit: this.limit,
        _start: this.start
      })
      this.tableData = res.data
      // 获取经纪总数量
      const result = await getAgentsCount()
      this.total = result.data
    },
    // 添加经纪
    addFn() {
      this.visibleDialog = true
    },
    // 分页
    changePage(page) {
      // console.log(page)
      this.start = (page - 1) * this.limit
      this.getAgentsList()
    },
    // 删除经纪
    async delFn(id) {
      this.$confirm('确定要删除此经纪吗', '删除', {
        type: 'warning'
      })
        .then(async() => {
          // 调用删除接口
          await delAgents(id)
          // 刷新列表
          this.getAgentsList()
        })
        .catch(() => {
          console.log('取消删除')
        })
    },
    // 点击编辑-获取子组件实例调用方法
    editFn(id) {
      this.$refs.addAgents.editContent(id)
      this.visibleDialog = true
    },
    // 搜索功能
    async searchBtn() {
      // if (this.search === '') {
      //   return
      // }
      const res = await getAgents({
        name_contains: this.search
      })
      this.tableData = res.data
    }
  }
}
</script>

<style>
.el-table {
  margin-top: 20px;
}
</style>

